<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button
          class="icon-button back-button"
          style="margin-right: 10px"
          @click="$router.push({
            name: 'Order',
            query: {
              table_page: $route.query.index_table_page
            },
            params: {
              isBack: true
            }
          })"
        >
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span style="display:flex">
          <link-button :isName="true"
            :content="$t('route.order')"
            @click="
              $router.push({
                name: 'Order',
                query: {
                  table_page: $route.query.index_table_page
                },
                params: {
                  isBack: true
                }
              })
            "
          />&nbsp;/&nbsp;<span>{{$t('order.orderAssets') + orderData.order_id }}</span>
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            v-loading="loading"
            ref="Daas"
            :pageMethod="
              (params) => {
                params.order_id = orderData.order_id;
                params.search = searchValue;
                params.is_deleted = is_deleted;
                if (tableSearch) {
                      params.page = 1;
                      tableSearch = false;
                    }
                return $orinusApi.getOrderDesktops(params);
              }
            "
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <!-- 手工录入 -->
                <el-button
                  class="icon-button setting-button"
                  style="width: auto;"
                  @click="createOrderAssets('create', { order_id: orderData.order_id })"
                >
                  <i
                    class="iconfont iconzhongyiicon_bianji"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{
                    $t('order.manualInput')
                  }}</span>
                </el-button>
                <!-- 批量删除 -->
                <el-button
                  class="icon-button setting-button"
                  :disabled="tableSlotData.table.selectRows.length === 0"
                  style="width: auto; margin-right: 10px"
                  @click="operationOrder(tableSlotData.table.selectRows, 'delete')"
                >
                  <i
                    class="iconfont iconzhongyiicon_shanchu"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{
                    $t('common.BatchDelete')
                  }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-select default-first-option v-model="is_deleted" @change="tableSlotData.table.refresh(true)" :disabled="tableSlotData.table.loading" style="margin-right: 10px;">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input
                  :placeholder="$t('desktopManage.message.searchDesktops')"
                  v-model="searchValue"
                  @keyup.enter.native="tableSearchChange(tableSlotData)"
                  style="width: 200px"
                >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column
                type="selection"
                width="40"
                align="center"
              ></el-table-column>
              <!-- 桌面ID -->
              <el-table-column
                prop="machine_id"
                :label="$t('order.desktopId')"
                width="260"
              >
              </el-table-column>

              <!-- 桌面名称 -->
              <el-table-column
                prop="desktop_name"
                :label="$t('order.desktopName')"
              >
              </el-table-column>
              <!-- 桌面用户 -->
              <el-table-column
                prop="username"
                :label="$t('order.dekstopUser')"
              >
              </el-table-column>
              <!-- 带宽类型 -->
              <el-table-column
                prop="composite_specification"
                :label="$t('order.bandwidthType')"
                :formatter="
                  (row, column) => {
                    if (row.composite_specification == '0') {
                      return $t(`order.shared`);
                    }
                    return $t(`order.exclusive`);
                  }
                "
              >
              </el-table-column>
              <!-- 带宽大小 -->
              <el-table-column
                prop="band_width"
                :label="$t('order.bandwidthSize')"
              >
              <template #default="props">
                <span>{{props.row.band_width + 'M'}}</span>
              </template>
              </el-table-column>
              <!-- 规格 -->
              <el-table-column
                width="110"
                prop="specification"
                :label="$t('desktopManage.standard')"
                :formatter="
                  (row, column) => {
                    switch(row.specification_code) {
                      case '0' : return '2' + $t('desktopManage.cpu') + '4G';
                      case '1' : return '4' + $t('desktopManage.cpu') + '8G';
                      case '2' : return '8' + $t('desktopManage.cpu') + '16G';
                    }
                  }
                "
              >
              </el-table-column>
              <!-- 操作步骤 -->
              <el-table-column
                prop="step"
                :label="$t('order.steps')"
                :formatter="
                  (row, column) => {
                    if (row.step) {
                      return $t(`order.step.${row.step}`);
                    }
                    return '';
                  }
                "
              >
              </el-table-column>
              <!-- 状态 -->
              <el-table-column
                prop="status"
                :label="$t('desktopManage.status')"
                :formatter="
                  (row, column) => {
                    if (row.status && row.status == 200) {
                      return $t(`order.status.${row.status}`);
                    }
                    return $t(`order.status.failed`);
                  }
                "
              >
              </el-table-column>
              <!-- 删除 -->
              <el-table-column
                prop="is_deleted"
                :label="$t('order.isDelete')"
                :formatter="
                  (row, column) => {
                    if (row.is_deleted) {
                      return $t(`order.deleted`);
                    }
                    return $t(`order.notDeleted`);
                  }
                "
              >
              </el-table-column>
              <el-table-column :label="$t('common.action')" width="240">
                <template #default="props">
                  <!-- 编辑 -->
                  <link-button
                    :content="$t('common.edit')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="createOrderAssets('edit', props.row)"
                  />
                  <!-- 删除 -->
                  <link-button
                    :content="$t('common.delete')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="operationOrder(props.row, 'delete')"
                  />
                  <!-- 更换桌面 -->
                  <el-tooltip class="item" effect="dark" :content="$t('order.Message.orderDoing')" placement="top" v-if="orderStatus">
                    <link-button
                      :disabled="orderStatus"
                      :content="$t('order.action.change_desktop')"
                      :size="10"
                      :font-size="'12px'"
                      style="margin-right: 15px"
                      @click="changeDesktop(props.row)"
                    />
                  </el-tooltip>
                  <link-button
                    v-else
                    :content="$t('order.action.change_desktop')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="changeDesktop(props.row)"
                  />
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <operation-order @success="tableSlotData.table.refresh" ref="retryDialog"/>
              <order-assets @success="tableSlotData.table.refresh" ref="orderAssets"/>
              <change-desktop @success="tableSlotData.table.refresh" ref="changeDesktop"/>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import BasicTable from "../../components/Basic/Table/BasicTable.vue";
import LinkButton from "../../components/Basic/Button/LinkButton.vue";
import { AuthModule } from "../../store/modules/auth";
import OperationOrder from "./components/operationOrderConfirmDialog.vue"
import OrderAssets from "./components/orderAssetsFormDialog.vue"
import orinusApi from '../../api/orinusApi';
import ChangeDesktop from './components/changeDesktopFormDialog.vue'
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    OperationOrder,
    OrderAssets,
    ChangeDesktop
  },
  data() {
    return {
      loading: false,
      poolData: {},
      currentDetail: "Horizon",
      horizonSearchValue: "",
      daasSearchValue: "",
      searchValue: "",
      userList: [],
      authrole: AuthModule.authrole,
      tableSearch: false,
      orderStatus: false,
      is_deleted: '',
      options: [{
        value: '',
        label: this.$t('order.allDeleted')
      },{
        value: true,
        label: this.$t('order.deleted'),
      },{
        value: false,
        label: this.$t('order.notDeleted')
      }]
    };
  },
  async created() {
    this.orderData = {
      id: (this as any).$route.query.id,
      order_id: (this as any).$route.query.order_id
    };
    this.orderStatus = (this as any).$route.query.status == "doing" ? true : false
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    createOrderAssets(type: string, data: any) {
      (this as any).$refs.orderAssets.init(type, data);
    },
    operationOrder(data: any, type: string) {
      let obj: any = {};
      obj.data = data;
      obj.type = type;
      (this.$refs["retryDialog"] as any).init(obj);
    },
    changeDesktop(data: any) {
      (this.$refs["changeDesktop"] as any).init(data);
    }
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px;
        }

        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
